<template>
  <div>
    <div class="title-btn">
      <div style="display:flex;">
        <el-input style="width:180px;margin-right:20px;" placeholder="公告名称" v-model="cementname"></el-input>
        <el-date-picker
          v-model="starttime"
          type="daterange"
          style="margin-right:20px;"
          rangeSeparator="至"
          startPlaceholder="开始时间"
          endPlaceholder="结束时间"
          valueFormat="yyyy-MM-dd"
          @change="pickerchange"
        ></el-date-picker>
        <el-select v-model="msgtype" clearable style="margin-right:20px;">
          <el-option v-for="(item,index) in daimaList" :key="index" :label="item.hash.code_name" :value="item.hash.code_name"></el-option>
        </el-select>
        <el-button type="primary" size="mini" @click="search">搜索</el-button>
      </div>
      <el-button type="primary" size="mini" @click="sendcement">发布公告</el-button>
    </div>
    <el-table
      :data="alarmArr"
      style="width: 100%"
    >
      <el-table-column
        type="index"
        width="50"
      >
      </el-table-column>
      <el-table-column
        prop="hash.title"
        label="标题"
        width="100"
      >
      </el-table-column>
      <el-table-column
        prop="hash.username"
        label="发布人"
        width="100"
      >
      </el-table-column>
      <el-table-column
        prop="hash.msgtype"
        label="类型"
        width="100"
      >
      </el-table-column>
      <el-table-column
        prop="hash.context"
        label="内容"
      >
      </el-table-column>

      <el-table-column
        prop="hash.createtime"
        label="发布时间"
        width="200"
      >
      </el-table-column>
      <el-table-column
        prop="hash.readcount"
        label="阅读人数"
        width="100"
      >
      </el-table-column>
      <el-table-column label="操作" width="230">
        <template slot-scope="scope">
          <el-button type="primary" size="small" @click="checkmymessage(scope.row)">查看</el-button>
          <el-button type="primary" size="small" @click="modifymymessage(scope.row)">修改</el-button>
          <el-button type="primary" size="small" @click="deletemymessage(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      @current-change="handleCurrentChange"
      :currentPage.sync="pagobj.currentPage3"
      :pageSize="pagobj.pagesize"
      layout="total, prev, pager, next"
      :total="pagobj.total"
      style="margin:20px 0;text-align:center"
    >
    </el-pagination>
    <el-dialog
      title="查看"
      :visible.sync="dia1"
      width="40%"
    >
      <div class="tz_content">
        <div>{{check_content.username}}发布{{check_content.msgtype}}:</div>
        <div>{{check_content.context}}</div>
        <div>{{check_content.createtime}}</div>
        <upload2 :filelimit="5" :filelink.sync="filearr2" :isedit="true" :ispic="false"></upload2>
      </div>
      <div class="tz_liuyan">
        <div class="chatbox">
          <div v-for="(item,index) in check_liuyan" :key="index">
            <div class="chat">
              <p>{{item.hash.username}}： {{item.hash.context}}</p>
              <p class="tr">{{item.hash.createdate}}</p>
            </div>
          </div>
          <div class="textbox">
            <el-form labelWidth="40px">
              <el-form-item label="内容">
                <el-input v-model="textarea" type="textarea"></el-input>
                <el-button
                  style="float:right;margin-top:10px"
                  type="primary"
                  size="mini"
                  @click="sendliuyan"
                >发送</el-button>
              </el-form-item>
            </el-form>
          </div>
        </div>
      </div>
    </el-dialog>
    <el-dialog
      :title="title"
      :visible.sync="dia2"
      width="40%"
      v-if="showcement"
      :beforeClose="cementcancel"
    >
      <div class="content">
        <el-form v-model="addtongzhi" labelWidth="80px">
          <el-form-item label="标题">
            <el-input v-model="addtongzhi.tz_title"></el-input>
          </el-form-item>
          <el-form-item label="内容">
            <el-input v-model="addtongzhi.tz_context" type="textarea"></el-input>
          </el-form-item>
          <el-form-item label="通知人">
            <el-select v-model="addtongzhi.tz_user" placeholder="请选择" multiple collapseTags
              @visible-change="visibleChange"
            >
              <el-option :value="mineStatusValue" style="height: auto">
                <el-tree
                  :data="arr"
                  showCheckbox
                  :defaultCheckedKeys="morenarr"
                  nodeKey="id"
                  ref="tree"
                  highlightCurrent
                  :props="defaultProps"
                  @check-change="handleCheckChange"
                ></el-tree>
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="类型">
            <el-select v-model="addtongzhi.tz_msgtype" clearable style="margin-right:20px;">
              <el-option v-for="(item,index) in daimaList" :key="index" :label="item.hash.code_name" :value="item.hash.code_name"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="附件">
            <upload2 :filelimit="5" :filelink.sync="filearr1" :isedit="false" :ispic="false"></upload2>
          </el-form-item>
        </el-form>
      </div>
      <div class="foot">
        <el-button type="primary" size="mini" @click="cementsave">发布</el-button>
        <el-button size="mini" @click="cementcancel">取消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import upload2 from '~/components/common/upload2.vue';

export default {
  data() {
    return {
      dia1: false,
      dia2: false,
      ts: this.newStore(),
      alarmArr: [],
      // alarmData: {},
      starttime: [],
      daimaList: [],
      cementname: '',
      msgtype: '',
      addtongzhi: {
        tz_title: '',
        tz_context: '',
        tz_msgtype: '',
        tz_user: [],
      },
      title: '',
      dialogindex: '',
      msgid: '',
      pagobj: {
        currentPage3: 1,
        pagesize: 10,
        total: 10,
      },
      arr: [],
      morenarr: [],
      defaultProps: {
        children: 'children',
        label: 'label',
      },
      planperson: [],
      mineStatusValue: [],
      check_content: {},
      check_liuyan: [],
      showcement: false,
      textarea: '',
      filearr1: [],
      filearr2: [],
    };
  },
  components: {
    upload2,
  },
  created() {
    this.getTree();
    this.getalarmArr();
    this.getcodetypelist();
  },
  methods: {
    reload(partsname) {
      this[partsname] = false;
      this.$nextTick(() => {
        this[partsname] = true;
      });
    },
    handleCurrentChange() {
      this.getalarmArr();
    },
    closemymessage() {
      this.getalarmArr();
      // this.$router.go(0);
      this.dia1 = false;
    },
    getalarmArr() {
      const req = {
        handle: '0191283F93927EDB050783D3551EBA101FCD596A0DA88D3E',
        msgtype: this.msgtype,
        title: this.cementname,
        createtime_begin: this.starttime[0],
        createtime_end: this.starttime[1],
        start: (this.pagobj.currentPage3 - 1) * this.pagobj.pagesize,
        limit: this.pagobj.pagesize,
      };
      this.spost(this.ts, '/mainservlet', req).then((ts) => {
        this.alarmArr = ts.d.data.operation1;
        this.pagobj.total = parseInt(ts.d.data.operation2[0].hash.allrs);
      });
    },
    search() {
      this.getalarmArr();
    },
    pickerchange() {
      this.$nextTick(() => {
        if (this.starttime == null) {
          this.starttime = [];
        }
      });
    },
    checkmymessage(row) {
      this.filearr2.splice(0, this.filearr2.length);
      this.dia1 = true;
      console.log(row);
      this.msgid = row.hash.msgid;
      // this.alarmData = {};
      const req = {
        handle: '0191283F93927EDB050783D3551EBA1053F6ECF60F140298',
        msgid: row.hash.msgid,

      };
      this.spost(this.ts, '/mainservlet', req).then((ts) => {
        this.check_content = ts.d.data.operation1[0].hash;
        this.check_liuyan = ts.d.data.operation3;
        // this.filearr2 = [];
        ts.d.data.operation4.forEach((item) => {
          const obj = {};
          obj.url = item.hash.fileurl;
          obj.name = item.hash.filename;
          this.filearr2.push(obj);
        });
        console.log(this.filearr2, 'this.filearr2this.filearr2');
      });
    },
    modifymymessage(row) {
      console.log(row, 'row');
      this.title = '修改公告';
      this.dialogindex = '2';
      const req = {
        handle: '0191283F93927EDB050783D3551EBA1053F6ECF60F140298',
        msgid: row.hash.msgid,

      };
      this.spost(this.ts, '/mainservlet', req).then((ts) => {
        this.dia2 = true;
        this.addtongzhi = {
          tz_context: row.hash.context,
          tz_title: row.hash.title,
          // tz_user: row.hash.
          tz_msgtype: row.hash.msgtype,
        };
        this.addtongzhi.tz_user = [];
        this.planperson = [];
        this.mineStatusValue = [];
        this.morenarr = [];
        ts.d.data.operation2.forEach((item) => {
          this.addtongzhi.tz_user.push(item.hash.username);
          this.planperson.push(item.hash.userid);
          this.mineStatusValue.push({ id: item.hash.userid, label: item.hash.username });
          this.morenarr.push(item.hash.username);
        });
        this.filearr1 = [];
        ts.d.data.operation4.forEach((item) => {
          const obj = {};
          obj.url = item.hash.fileurl;
          obj.name = item.hash.filename;
          this.filearr1.push(obj);
        });
        console.log(this.mineStatusValue, this.filearr1, 'this.filearr1');
        this.showcement = false;
        this.reload('showcement');
      });

      this.msgid = row.hash.msgid;
    },
    visibleChange() {
      // console.log('1111111', this.planperson);
      this.$nextTick(() => {
        this.$refs.tree.setCheckedNodes(this.mineStatusValue);
      });
    },
    deletemymessage(row) {
      this.$confirm('确认删除？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }).then(() => {
        const req = {
          handle: '0191283F93927EDB050783D3551EBA10E849D5CAE123A68B947582CCD53E9710',
          msgid: row.hash.msgid,
        };
        this.spost(this.ts, '/mainservlet', req).then((ts) => {
          this.getalarmArr();
        });
      });
    },
    sendcement() {
      this.title = '发布公告';
      this.dialogindex = '1';
      this.dia2 = true;
      this.addtongzhi = {
        tz_context: '',
        tz_title: '',
        tz_msgtype: '',
        tz_user: [],
      };
      this.planperson = [];
      this.mineStatusValue = [];
      this.filearr1 = [];
      this.showcement = false;
      this.reload('showcement');
    },
    getcodetypelist() {
      const req = {
        handle: '67A5B6FEF17D97DECF116BDF95B95C0B167942DD3F1604F9',
        supid: '0601',
        codetype: '06',
        notactive: '-1',
      };
      this.spost(this.ts, '/mainservlet', req).then((ts) => {
        this.daimaList = ts.d.data.operation1;
      });
    },
    cementsave() {
      if (this.dialogindex == '1') {
        this.$confirm('确认发布？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
        }).then(() => {
          const req = {
            handle: '0191283F93927EDB050783D3551EBA10520C55FD7F8BC16E55D7F45B0EB9C8BD',
            context: this.addtongzhi.tz_context,
            title: this.addtongzhi.tz_title,
            msgtype: this.addtongzhi.tz_msgtype,
            userid: this.planperson,
            username: this.addtongzhi.tz_user,
            fileurl: this.posturl(this.filearr1),
            fielname: this.postname(this.filearr1),
          };
          this.spost(this.ts, '/mainservlet', req).then((ts) => {
            this.dia2 = false;
            this.getalarmArr();
          });
        });
      } else {
        this.$confirm('确认修改？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
        }).then(() => {
          const req = {
            handle: '0191283F93927EDB050783D3551EBA10268EDDA5AD418996947582CCD53E9710',
            msgid: this.msgid,
            context: this.addtongzhi.tz_context,
            title: this.addtongzhi.tz_title,
            msgtype: this.addtongzhi.tz_msgtype,
            userid: this.planperson,
            username: this.addtongzhi.tz_user,
            fileurl: this.posturl(this.filearr1),
            filename: this.postname(this.filearr1),
          };
          this.spost(this.ts, '/mainservlet', req).then((ts) => {
            this.dia2 = false;
            this.getalarmArr();
          });
        });
      }
    },
    posturl(arr) {
      const a = [];
      for (let i = 0; i < arr.length; i += 1) {
        a.push(arr[i].url);
      }
      return a;
    },
    // 公共方法图片数组转名称数组
    postname(arr) {
      const b = [];
      for (let i = 0; i < arr.length; i += 1) {
        b.push(arr[i].name);
      }
      return b;
    },
    cementcancel() {
      this.$confirm('确定取消？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }).then(() => {
        this.dia2 = false;
      });
    },
    getTree() {
      const req = {
        handle:
          '45EE8FEFE87870C53A0536D8566DA8C94345851CDDF60960CBCA139672EA5B8C230BE336D992C9E341DC33B3A5E90841',
      };
      this.spost(this.ts, '/mainservlet', req).then((ts) => {
        if (ts.d.sflag == 'success') {
          this.getTreedata(ts.d.data.operation1);
          console.log(ts.d.data.operation1, 'ts.d.data.operation1');
        }
      });
    },
    getTreedata(data) {
      const arr = data;
      const arr1 = arr.map(item => item.hash);
      const date = [];
      const obj = {
        id: 987654321,
        label: '全部',
        children: [],
      };
      arr1.forEach((item) => {
        if (!date.includes(item.orgname)) {
          date.push(item.orgname);
        }
      });
      const ars = [];
      date.forEach((item, ind) => {
        ars.push({
          id: ind,
          label: item,
          children: [],
        });
      });
      arr1.forEach((item) => {
        ars.forEach((file) => {
          if (file.label === item.orgname) {
            file.children.push({
              id: item.pid,
              label: item.username,
            });
          }
        });
      });
      obj.children = ars;
      this.arr.push(obj);
    },
    handleCheckChange() {
      const res = this.$refs.tree.getCheckedNodes(true, true); // 这里两个true，1. 是否只是叶子节点 2. 是否包含半选节点（就是使得选择的时候不包含父节点）
      const arrLabel = [];
      const arr = [];
      const tt = [];
      res.forEach((item) => {
        arrLabel.push(item.label);
        arr.push(item);
        tt.push(item.id);
      });
      // console.log(arr,'1')
      // console.log(arrLabel,'2')
      this.mineStatusValue = arr;
      this.planperson = tt;
      this.addtongzhi.tz_user = arrLabel;
      console.log(this.mineStatusValue, this.planperson, this.addtongzhi.tz_user);
      if (arr.length > 0) {
        this.flag = true;
      } else {
        this.flag = false;
      }
    },
    sendliuyan() {
      const req = {
        handle:
          '0191283F93927EDB050783D3551EBA10520C55FD7F8BC16E35A0ACC69E1EA1BF',
        msgid: this.msgid,
        context: this.textarea,
      };
      this.spost(this.ts, '/mainservlet', req).then((ts) => {
        if (ts.d.sflag == 'success') {
          const req = {
            handle: '0191283F93927EDB050783D3551EBA1053F6ECF60F140298',
            msgid: this.msgid,
          };
          this.spost(this.ts, '/mainservlet', req).then((ts) => {
            this.check_liuyan = ts.d.data.operation3;
          });
        }
      });
    },
  },
};
</script>

<style scope>
.tz_content{
  border: 1px solid #c0c4cc;
  border-radius: 4px;
  padding: 20px;
  margin-bottom: 20px;
}
.tz_content div{
  margin: 10px 0;
}
.tz_content div:nth-of-type(2){
  text-indent:2em;
}
.tz_content div:nth-of-type(3){
  text-align: right;
}
.tz_liuyan{
  border: 1px solid #c0c4cc;
  border-radius: 4px;
  padding: 20px;
}
.title-btn {
  display: flex;
  justify-content: space-between;
  margin-bottom: 20px;
}
.foot {
  text-align: right;
}
.chatbox {

}
.chatbox .chat {
  border: 1px solid #c0c4cc;
  padding: 15px;
  margin: 10px 0;
  border-radius: 20px;
}
.chatbox .chat p{
  line-height: 20px;
}
</style>
